<template>
  <view v-if="orderData">
    <view class="bg pad30 w mt20">
      <view class="state-con">
        <view class="mb30" v-for="(item, idx) in waybillInfoList" :key="idx">
          <view class="flex-align">
            <view class="div"></view>
            <view class="ml30" style="width: 90%">
              <text class="color-info">{{ item.opName }}</text>
              <text class="color-info f12 ml20">{{ item.opTime }}</text>
            </view>
          </view>
          <view class="ml30" style="width: 90%">
            <text class="color-info">{{ item.description }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bg pad30 w mt20">
      <view class="flex-align flex-between mb44">
        <view class="flex-align">
          <text>SALTS</text>
          <!-- <u-icon name="arrow-right" color="#999" size="16" class="ml10"></u-icon> -->
        </view>
        <text class="color-primary">{{ orderTypeList[orderData.orderInfo.orderState] }}</text>
      </view>
      <view class="goods mb30" v-for="(v, i) in orderData.orderDetails" :key="i">
        <view class="flex-align">
          <image :src="v.imgUrl" mode="scaleToFill" />
          <view class="info ml30">
            <view class="line2">{{ v.clothName }}</view>
            <view class="flex-between color-info f13 mt10 mb40">
              <text class="">{{ v.color }}色 {{ v.spec }}</text>
              <text class="">x{{ v.number }}</text>
            </view>
            <view class="">
              <text>￥</text>
              <text class="f16">{{ v.price }}</text>
            </view>
          </view>
        </view>
        <!-- <view class="mt20" style="display: flex; justify-content: end">
          <view class="order-btn flex-center">退换</view>
        </view> -->
      </view>
      <view class="flex-align flex-between mt45">
        <text>商品总价</text>
        <view class="flex-align color-info">
          <text>￥</text>
          <text class="f16">{{ orderData.orderInfo.totalAmount }}</text>
        </view>
      </view>
      <view class="flex-align flex-between mt45">
        <text>订单实付</text>
        <view class="flex-align">
          <text>￥</text>
          <text class="f16 bold">{{ orderData.orderInfo.payAmount }}</text>
        </view>
      </view>
      <view class="flex-align flex-between mt45">
        <text>订单号</text>
        <view class="flex-align color-info">
          <text class="mr10">{{ orderData.orderInfo.orderNo }}</text>
        </view>
      </view>
      <view class="flex-align flex-between mt45">
        <text>物流单号</text>
        <view class="flex-align color-info">
          <text class="mr10">{{ orderData.orderInfo.logisticsInfomation }}</text>
          <text class="color-primary pl10" style="border-left: 1px solid #d9d9d9" @tap="tapCopy">拷贝</text>
        </view>
      </view>
      <view class="flex-align flex-between mt45">
        <text>下单时间</text>
        <view class="flex-align color-info">
          <text>{{ dayjs(orderData.orderInfo.orderCreateTime).format('YYYY.MM.DD HH:mm:ss') }}</text>
        </view>
      </view>
      <view class="flex-align flex-between mt45">
        <text>付款时间</text>
        <view class="flex-align color-info">
          <text>{{ dayjs(orderData.orderInfo.orderPayTime).format('YYYY.MM.DD HH:mm:ss') }}</text>
        </view>
      </view>
    </view>
    <view class="bg btn-con pad30" v-if="orderData.orderInfo.orderState == 5">
      <view class="btn flex-center" @tap="endShopping">确认收货</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { orderTypeList } from '@/utils/enum'
import homeApi from '@/api/homeApi'
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import { ref } from 'vue'
import dayjs from 'dayjs'

const orderId = ref('')
onLoad((e: any) => {
  orderId.value = e.orderId
  getOrderDetails()
})

const waybillInfoList: any = ref([])
const gwWaybillInfoList = () => {
  uni.request({
    url: 'https://www.yto.net.cn/ec/order/gwWaybillInfoList',
    method: 'POST',
    data: [orderData.orderInfo.logisticsInfomation],
    success: (res: any) => {
      waybillInfoList.value = res.data[0].waybillProcessInfo
    },
  })
}

const orderData: any = reactive({})
const getOrderDetails = () => {
  homeApi
    .getOrderDetails({
      userId: uni.getStorageSync('userId'),
      orderId: orderId.value,
    })
    .then((res: any) => {
      Object.assign(orderData, res.data)
      gwWaybillInfoList()
    })
}

/* 确认收货 */
const endShopping = () => {
  uni.showModal({
    title: '提示',
    content: '确认收货吗？',
    success: (res) => {
      if (res.confirm) {
        homeApi
          .updateOrderStatus({
            userId: uni.getStorageSync('userId'),
            orderId: orderId.value,
            state: 6,
          })
          .then((res: any) => {
            if (res.success) {
              uni.showToast({
                title: '确认收货成功',
                icon: 'none',
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            }
          })
      }
    },
  })
}

const tapCopy = () => {
  uni.setClipboardData({
    data: orderData.orderInfo.logisticsInfomation,
    // success: function () {
    //   uni.showToast({
    //     title: '复制成功',
    //     icon: 'none',
    //   })
    // },
  })
}
</script>

<style>
page {
  padding-bottom: 150rpx;
  background-color: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.state-con {
  position: relative;
  border-left: 1px dashed #999999;

  .div {
    position: absolute;
    left: -10rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: #dddddd;
    border-radius: 50%;
  }
}

.btn-con {
  position: fixed;
  bottom: 0;
  width: 100%;

  .btn {
    color: #fff;
    width: 690rpx;
    height: 72rpx;
    background-color: #111111;
  }
}

.order-btn {
  width: 160rpx;
  height: 72rpx;
  border: 1px solid #999999;
}

.goods {
  image {
    width: 200rpx;
    height: 200rpx;
  }

  .info {
    width: 400rpx;
  }
}
</style>
